<template>
    <div class="safe2View2">
        <!-- 头部 -->
        <!-- <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>安全检查台账
        </div> -->
        <!-- 内容部分 -->
        <div class="safe2_main2">
            <div class="safe2Box2">
                <h1>安全检查总次数:{{total1}}次</h1>
                <ul class="ul11">
                    <li class="clearfix">
                        <span class="spa">检查单位</span>
                        <!-- <em @click="$router.push('./list1')"
                            v-if="!name1">请选择
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./list1',query:{radios:name1}})"
                            v-else>{{name1}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em> -->
                        <em @click="checkCompanyPropShow = true">
                            {{name1?name1:'请选择'}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                    <!-- <li class="clearfix">
                        <span class="spa">受检单位</span>
                        <em @click="$router.push({path:'./list2',query:{radios:name2,type:3}})"
                            v-if="!name2">请选择
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./list2',query:{radios:name2,type:3}})"
                            v-else>{{name2}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li> -->
                    <li class="clearfix">
                        <span class="spa">检查类型</span>
                        <!-- <em @click="$router.push('./list3')"
                            v-if="!name3">请选择检查类型
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="$router.push({path:'./list3',query:{radios:name3}})"
                            v-else>{{name3}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em> -->
                        <em @click="checkTypePropShow = true">
                            {{name3?name3:'请选择'}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">检查开始时间</span>
                        <datetime v-model="param.data.startTime"
                                  @on-change="change1"></datetime>
                        <x-icon type="ios-arrow-right"
                                size="20"></x-icon>
                    </li>
                    <li class="clearfix"
                        style="border-bottom:0">
                        <span class="spa">检查结束时间</span>
                        <datetime v-model="param.data.endTime"
                                  @on-change="change2"></datetime>
                        <x-icon type="ios-arrow-right"
                                size="20"></x-icon>
                    </li>
                </ul>
                <h2>安全检查
                    <span>{{total2}}
                        <em>次</em>
                    </span>
                </h2>
                <ul class="ul22">
                    <li class="clearfix"
                        v-for="(item,index) in listArr"
                        :key="index"
                        @click="routerGo(item)">
                        <div class="leftDiv">
                            <h3>{{item.safeCheckTitleItem}}</h3>
                            <p>({{item.Category | demoName}}){{item.safeCheckType}}</p>
                        </div>
                        <div class="rightDiv">
                            {{item.safeCheckTimeItem}}
                            <x-icon type="ios-arrow-right"
                                    size="20"
                                    class="icon-white"></x-icon>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <checkCompanyProp :checkCompanyPropShow="checkCompanyPropShow"
                          :selectCheckCompany="selectCheckCompany"></checkCompanyProp>
        <checkTypeProp :checkTypePropShow="checkTypePropShow"
                       :selectCheckType="selectCheckType"></checkTypeProp>
        <myMenu @clickBack="back"
                backPath='/safeCheck'></myMenu>
    </div>
</template>
<script>
import { Datetime } from 'vux'
import myMenu from '@/commonComponents/menu'
import checkCompanyProp from '@/commonComponents/checkCompanyProp'
import checkTypeProp from '@/commonComponents/checkTypeProp'
export default {
    components: {
        Datetime,
        myMenu,
        checkCompanyProp,
        checkTypeProp
    },
    data () {
        return {
            checkCompanyPropShow: false,
            checkTypePropShow: false,
            show: false,
            satrTime: '',
            endTime: ' ',
            param: {
                allowPaging: true,
                business: 'getSafeCheckList',
                data: {
                    checkStationId: '',
                    sCheckStationId: '',
                    checkTypeId: '',
                    startTime: '',
                    endTime: ''
                },
                pageIndex: 0,
                pageSize: 10000,
                tokenId: 'D0853C0CE5A6A478F5C613B840394FC3',
                userId: '615123137'
            },
            listArr: [],
            total1: 0,
            total2: 0,
            name1: '',
            name2: '',
            name3: '',
            userInfo: ''
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        // if (window.sessionStorage.getItem('star')) {
        //     this.param.data.startTime = window.sessionStorage.getItem('star')
        // } else {
        //     var day2 = new Date()
        //     day2.setTime(day2.getTime())
        //     var m = day2.getMonth() + 1 < 10 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1
        //     this.param.data.startTime = day2.getFullYear() + '-' + m + '-' + '01'
        //     console.log(this.param.data.startTime)
        // }
        // if (window.sessionStorage.getItem('end')) {
        //     this.param.data.endTime = window.sessionStorage.getItem('end')
        // } else {
        // this.param.data.endTime=this.endTime
        var day2 = new Date()
        day2.setTime(day2.getTime())
        var m = day2.getMonth() + 1 < 10 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1
        this.param.data.startTime = day2.getFullYear() + '-' + m + '-' + '01'
        day2.setTime(day2.getTime())
        var d = day2.getDate() < 10 ? '0' + day2.getDate() : day2.getDate()
        this.param.data.endTime = day2.getFullYear() + '-' + m + '-' + d
        // }
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.param.userId = token.userid
        // if (window.sessionStorage.getItem('name1')) {
        //     this.name1 = window.sessionStorage.getItem('name1')
        // } else {
        //     this.name1 = this.userInfo.deptname
        // }
        this.name1 = this.userInfo.deptname
        // if (window.sessionStorage.getItem('paramsName')) {
        //     this.name2 = window.sessionStorage.getItem('paramsName')
        // }
        // if (window.sessionStorage.getItem('id1')) {
        //     this.param.data.checkStationId = window.sessionStorage.getItem('id1')
        // }
        this.param.data.checkStationId = this.userInfo.deptid
        // if (window.sessionStorage.getItem('ids2')) {
        //     this.param.data.sCheckStationId = window.sessionStorage.getItem('ids2')
        // }
        if (window.sessionStorage.getItem('name3')) {
            this.name3 = window.sessionStorage.getItem('name3')
            this.param.data.checkTypeId = window.sessionStorage.getItem('name3')
        }
        this.dataArr()
    },
    methods: {
        back () {
            window.sessionStorage.removeItem('id1')
            window.sessionStorage.removeItem('ids2')
            window.sessionStorage.removeItem('star')
            window.sessionStorage.removeItem('end')
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('name3')
            window.sessionStorage.removeItem('paramsName')
            // this.$router.push('./safeCheck')
        },
        routerGo (item) {
            window.sessionStorage.removeItem('id1')
            window.sessionStorage.removeItem('ids2')
            window.sessionStorage.removeItem('star')
            window.sessionStorage.removeItem('end')
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('name3')
            window.sessionStorage.removeItem('paramsName')
            this.$router.push({ path: './view3Details2', query: { id: item.safeCheckIdItem } })
        },
        change1 (value) {
            console.log('change', value)
            window.sessionStorage.setItem('star', value)
            this.dataArr()
        },
        change2 (value) {
            console.log('change', value)
            window.sessionStorage.setItem('end', value)
            this.dataArr()
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.param).then((res) => {
                if (res.status) {
                    this.listArr = res.data.data.safeCheckList
                    this.total1 = res.data.data.safeCheckTotalNums
                    this.total2 = res.data.data.safeCheckNums
                }
            }
            )
        },
        selectCheckCompany (item) {
            this.checkCompanyPropShow = false
            this.name1 = item.deptName
            this.param.data.checkStationId = item.deptId
            this.dataArr()
        },
        selectCheckType (item) {
            this.checkTypePropShow = false
            this.name3 = item.checkTypeName
            this.param.data.checkTypeId = item.checkTypeId
            this.dataArr()
        }
    },
    filters: {
        demoName: function (val) {
            var name = ''
            if (!val) {
                name = ''
            } else if (val == 'project') {
                name = '项目级别'
            } else if (val == 'company') {
                name = '公司级别'
            } else {
                name = '分公司级别'
            }
            return name
        }
    }
}
</script>
<style lang="less" scope>
.safe2View2 {
    width: 100%;
    height: 100%;
    background-color: #ebeef2;
    .header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
        font-size: 18px;
        background: #2269ff;
        color: #fff;
        .vux-x-icon {
            fill: cornsilk;
            position: absolute;
            left: 0;
            top: 5px;
            width: 30px;
            height: 30px;
        }
    }
    .safe2_main2 {
        height: 603px;
        width: 100%;
        background-color: #ebeef2;
        .safe2Box2 {
            width: 100%;
            height: 603px;
            h1 {
                height: 60px;
                line-height: 60px;
                font-size: 16px;
                color: #2269ff;
                border-bottom: 1px solid #eee;
                background-color: #fff;
                padding: 0 10px;
            }
            .ul11 {
                padding: 0 10px;
                background-color: #fff;
                li {
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    font-size: 16px;
                    display: flex;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 15px;
                        right: -6px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 100px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        width: 240px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: #999;
                    }
                    .weui-cell {
                        padding: 0;
                        height: 28px;
                        z-index: 999999;
                        width: 259px;
                        height: 28px;
                    }
                    .vux-cell-value {
                        float: right;
                        width: 248px;
                        height: 28px;
                        font-size: 14px;
                        text-align: right;
                        color: #999;
                    }
                    .weui-cell_access .weui-cell__ft:after {
                        // top: 46%;
                        // width: 8px;
                        // height: 8px;
                        // content:0;
                        display: none;
                    }
                    .vux-datetime .weui-cell .weui-cell_access {
                        width: 259px;
                        height: 28px;
                    }
                }
            }
            h2 {
                padding: 0 10px;
                height: 60px;
                line-height: 60px;
                font-size: 16px;
                letter-spacing: 1px;
                color: #2269ff;
                background-color: #fff;
                border-bottom: 1px solid #eee;
                margin-top: 20px;
                span {
                    float: right;
                    color: #666;
                }
                em {
                    color: #666;
                }
            }
            .ul22 {
                padding: 0 !important;
                background-color: #fff;
                width: 100%;
                li {
                    // height: 90px;
                    padding: 10px;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    background-color: #fff;
                    .leftDiv {
                        float: left;
                        width: 200px;
                        h3 {
                            font-size: 14px;
                            height: 30px;
                            width: 100%;
                            line-height: 30px;
                            color: #666;
                            -webkit-line-clamp: 2;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }
                        p {
                            font-size: 14px;
                            line-height: 18px;
                            color: #999;
                        }
                    }
                    .rightDiv {
                        float: right;
                        width: 106px;
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;
                        color: #999;
                        .vux-x-icon {
                            fill: #999;
                            float: right;
                            margin-top: 10px;
                            margin-right: -8px;
                        }
                    }
                }
            }
        }
    }
    .weui-cell:before {
        border-top: 0px !important;
    }
    .vux-cell-primary {
        margin-right: 10px;
        height: 28px;
        line-height: 31px;
    }
}
</style>
